<template>
	<scroll-view scroll-y @scrolltolower="scrolltolower">
		<view>
			<view class="status_bar">
			          <!-- 这里是状态栏 -->
			</view>
			<view class="nav">
				<u-icon name="arrow-left" color="#fff" size="36" @click="toindex"></u-icon>
			</view>
		</view>
		<view class="center">
			<view class="Normal">
				<view class="non">
					<view class="foot1">
						<image :src="dataInfo.image" mode="aspectFill" class="goodsImg"></image>
						<view class="text">
							已砍<span class="sp1">{{dataInfo.cutMoney}}元,</span> 免费仅差<span class="sp2">{{dataInfo.goodsPrice - dataInfo.cutMoney}}元</span>
						</view>
						<view class="again" @click="kanj">
							帮好友砍一刀
						</view>
					</view>
				</view>
				<view class="non1">
					<view class="top">
						<view class="title">
							砍价记录
						</view>
					</view>
		
					<view class="foot1" v-for="(item,index) in kjList">
						<view class="text">
							<view class="img">
								<image :src="item.image" mode=""></image>
							</view>
							<view class="name">
								{{item.userName}}
							</view>
							<view class="cont">
								砍掉了{{item.money}}元
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>
<script>
	import {kjcon} from"../../api/product.js"
	import{kjjl,helpKj}from"../../api/product.js"
	export default {
		components: {},
		data() {
			return {
				id:'',
				dataInfo:{},
				num:1,
				kjList:[]
			};
		},
		// 
		onLoad(e) {
			this.id=e.id
		},
		onShow() {
			if(this.Md.islogin()){
				this.getinfo()
				this.getInfo()
			}
		},

		//下拉刷新
		onPullDownRefresh() {},
		methods: {
			toindex(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			async getinfo(){
				let res=await this.get(kjcon,{taskId:this.id})
				this.dataInfo=res.data
			},
			async getInfo(){
				let res=await this.get(kjjl,{taskId:this.id,pageSize:10,pageNum:this.num})
				this.kjList=res.data.list
			},
			scrolltolower(){
				this.getInfo()
			},
			async kanj(){
				let res=await this.iget(helpKj,{taskId:this.id})
				if(res.code==0){
					this.msg(res.msg,'none')
					setTimeout(()=>{
						uni.switchTab({
							url:"/pages/index/index"
						})
					},1500)
				}else if(res.code==1){
					this.msg('砍价成功')
					setTimeout(()=>{
						uni.switchTab({
							url:"/pages/index/index"
						})
					},1500)
					this.getinfo()
					this.num=1
					this.getInfo()
				}
				
			}
			
		}
	}
</script>
<style lang="scss" scoped>
	.nav{
		padding-left: 30rpx;
		padding-top: 40rpx;
	}
	 .status_bar {
	      height: var(--status-bar-height);
	      width: 100%;
	  }
	.goodsImg{
		width: 200rpx;
		height: 200rpx;
		border-radius: 100rpx;
	}
	.sao{
		font-size: 30rpx;
		margin-top: 40rpx;
		color: #F0812D;
	}
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	
	.rect {
		width: 500rpx;
		height:600rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 40rpx 50rpx;
	}
	.back{
		margin-top: 30rpx;
		margin-left: 30rpx;
	}
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	scroll-view{
		background-image: -webkit-linear-gradient(-90deg, #502DE3 0%, #FFD783 100%);
		height: 100vh;
	}


	//砍价进行
	.Normal {
		// margin-top: 30upx;
		// margin-left: 30upx;
		width: 100%;
		// height: 1000upx;
		padding: 30upx;
		background-color: #E0413100;

		.non1 {
			width: 100%;
			// height: 400upx;
			background-color: #FFFFFF;
			border-radius: 24upx;
			margin-bottom: 30upx;

			.top {
				position: relative;
				width: 100%;
				height: 100upx;
				background: #FFE24E;
				border-radius: 12px 12px 0 0;
				margin-top: 40rpx;

				.jilu {
					position: absolute;
					display: inline-block;
					top: 35upx;
					left: 200upx;
					width: 28upx;
					height: 30upx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.title {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					font-size: 36upx;
					font-weight: 600;
					color: #4925FC;
					display: inline-block;
				}

				.jilu1 {
					position: absolute;
					display: inline-block;
					top: 35upx;
					left: 460upx;
					width: 28upx;
					height: 30upx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.foot1 {
				width: 100%;

				// height: 300upx;
				.text {
					position: relative;
					width: 100%;
					height: 100upx;
					display: flex;
					align-items: center;

					// background-color: #FF0000;
					.img {
						width: 68upx;
						margin-left: 30rpx;
						height: 68upx;
						line-height: 100upx;
						border-radius: 100%;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.img1 {
						position: absolute;
						top: 15upx;
						left: 420upx;
						width: 46upx;
						height: 46upx;
						line-height: 100upx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.name {
						font-size: 30upx;
						color: #515151;
						margin-left: 40rpx;
						width: 300rpx;
					}

					.cont {
						color: #333;
						font-size: 30upx;
					}
				}
			}
		}

		.non {
			width: 100%;
			background: radial-gradient(circle, #FFFBF1 0%, #F4E5C0 100%);
			border-radius: 12px;
			margin-bottom: 30upx;

			.foot1 {
				width: 100%;
				height: 400rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				.again {
					width: 420upx;
					height: 70upx;
					background-image: linear-gradient(to left, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
					border-radius: 30px;
					color: #FFFFFF;
					text-align: center;
					line-height: 70upx;
				}


				.text {
					// margin-top: 50upx;
					color: #000000;
					font-size: 30upx;
					float: right;

					span {
						margin-left: 7upx;
						margin-right: 7upx;
						color: #FF0000;
						font-weight: bolder;
					}

				}

			}

			.top {
				position: relative;
				width: 400upx;
				height: 100upx;
				background: #FFFFFF;
				border-radius: 0 0 12upx 12upx;
				margin-left: 150upx;
				font-weight: 700;

				.time {
					width: 300upx;
					position: absolute;
					top: 20upx;
					left: 50upx;
					font-size: 30rpx;
					display: flex;
					align-items: center;

					.cn {
						float: left;
						margin-left: 20upx;
						margin-top: 4upx;
						line-height: 60upx;
						color: #000000;
						font-weight: bolder;
					}

					.tmm {
						width: 170upx;
						display: inline-block;
						// background-color: #f3f3f3;
						height: 40upx;
						float: left;
						margin-left: 20upx;
						margin-top: 14upx;
						color: #000000;

						// background-color: #000;
						.one {
							float: left;
							height: 40upx;
							min-width: 40upx;
							background-color: #ffffff;
							color: #000000;
							border-radius: 3px;
							text-align: center;
							line-height: 40upx;
						}

						.mao {
							float: left;
							color: #000000;
							line-height: 40upx;
						}

						.two {
							float: left;
							height: 40upx;
							min-width: 40upx;
							background-color: #FFFFFF;
							color: #000000;
							;
							border-radius: 3px;
							text-align: center;
							line-height: 40upx;
						}

						.three {
							float: left;
							height: 40upx;
							min-width: 40upx;
							background-color: #FFFFFF;
							color: #000000;
							border-radius: 3px;
							text-align: center;
							line-height: 40upx;
						}
					}
				}
			}
		}
	}

</style>
